var srcBox,srcImg,dstImg;
var epdArr,epdInd,palArr;
var curPal;
var degree=0;
function getElm(n){return document.getElementById(n);}
function setInn(n,i){document.getElementById(n).innerHTML=i;}
function processFiles(files){
   var file=files[0];
   var reader=new FileReader();
   srcImg=new Image();
   reader.onload=function(e){
      setInn('srcBox','');
      // setInn('srcBox','<img id="imgView" class="sourceImage">');
      // var img=getElm('imgView');
      // img.src=e.target.result;
      srcImg.src=e.target.result;
   };
   
   reader.onloadend=function(){
      var tmpCanvas=getElm('source');
      var tmpCanvasCtx=tmpCanvas.getContext('2d');
      tmpCanvas.width=srcImg.width;
      tmpCanvas.height=srcImg.height;
      tmpCanvasCtx.drawImage(srcImg,0,0,srcImg.width,srcImg.height);
   }

   reader.readAsDataURL(file);
}
function rotateDstImage()
{
   var tmpCanvas=getElm('source');
   var tmpCanvasCtx=tmpCanvas.getContext('2d');
   oldW=tmpCanvas.width;
   oldH=tmpCanvas.height;

   tmpCanvas.width = oldH;
   tmpCanvas.height = oldW;

   tmpCanvasCtx.clearRect(0,0,tmpCanvas.width,tmpCanvas.height);
   tmpCanvasCtx.translate(tmpCanvas.width/2,tmpCanvas.height/2);
   tmpCanvasCtx.rotate(90*Math.PI/180);
   tmpCanvasCtx.translate(-tmpCanvas.width/2,-tmpCanvas.height/2);
   tmpCanvasCtx.drawImage(srcImg,tmpCanvas.width/2-srcImg.width/2,tmpCanvas.height/2-srcImg.height/2,srcImg.width,srcImg.height);
   tmpCanvasCtx.translate(tmpCanvas.width/2,tmpCanvas.height/2);
   tmpCanvasCtx.rotate(-90*Math.PI/180);
   tmpCanvasCtx.translate(-tmpCanvas.width/2,-tmpCanvas.height/2);
   tmpCanvasCtx.restore();

   srcImg.src=tmpCanvas.toDataURL("image/png");
}
function drop(e){
   e.stopPropagation();
   e.preventDefault();
   var files=e.dataTransfer.files;
   processFiles(files);
}
function ignoreDrag(e){
   e.stopPropagation();
   e.preventDefault();
}
function getNud(nm,vl){
   return '<td class="comment">' + nm + ':</td>' + 
          '<td><input id="nud_' + nm + '" class="nud" type="number" value="' + vl + '"/></td>';
}
function Btn(nm,tx,fn){
   return '<div><label class="menu_button" for="_' + nm + '">' + tx + '</label>' +
   '<input class="hidden_input" id="_' + nm + '" type="' +
   (nm == 0 ? 'file" onchange="' : 'button" onclick="') + fn + '"/></div>';
}
function RB(vl,tx){
   return '<input type="radio" name="kind" value="m' + vl +
   '" onclick="rbClick('+vl+');"' + (vl == 0 ? 'checked="true"' : '') + '/>' + tx;
}
window.onload = function(){
   srcBox = getElm('srcBox');
   srcBox.ondragenter=ignoreDrag;
   srcBox.ondragover=ignoreDrag;
   srcBox.ondrop=drop;
   srcImg=0;
   epdInd=0;

    palArr=[[[0,0,0],[255,255,255]],
            [[0,0,0],[255,255,255],[127,0,0]],
            [[0,0,0],[255,255,255],[127,127,127]],
            [[0,0,0],[255,255,255],[127,127,127],[127,0,0]],
            [[0,0,0],[255,255,255]],
            [[0,0,0],[255,255,255],[220,180,0]],
            [[0,0,0]],
            [[0,0,0],[255,255,255],[0,255,0],[0,0,255],[255,0,0],[255,255,0],[255,128,0]]];//5.65f 7-color E-Paper 
 
    epdArr=[[800,480,0]];

    setInn('BT',
            Btn(0,'1 Select Img file','processFiles(this.files);')+
            Btn(6,'2 Rotate Img','rotateDstImage();')+
            Btn(1,'3 Level in mono','procImg(true,false);')+
            Btn(3,'3 Dithering in mono','procImg(false,false);')+
            Btn(5,'4 Upload image','uploadImage();'));

    setInn('XY',getNud('x','0')+getNud('y','0'));
    setInn('WH',getNud('w','800')+getNud('h','480'));
     
    setInn('RB',RB(0,'GDEQ042&ensp;'));
}
function rbClick(index){
   getElm('nud_w').value=""+epdArr[index][0];
   getElm('nud_h').value=""+epdArr[index][1];
   epdInd=index;
}
